<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 留言板 </title>
  <script src="../libs/vue.js"></script>
  <style>

  td{
    border:1px solid #999;
    margin:3px;
  }
  .class1{
    color:blueviolet;
  }
  .class2{
    color:yellow;
  }
  .class3{
    color:deeppink;
  }
  .class4{
    color:deepskyblue;
  }

  .modal{
    width:200px;
    height:180px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    z-index:100;
  }

  </style>
</head>
<body>
    <div id="app">
        <h2>简单实现 Vue 留言板功能  </h2>
        <h2>展示数据</h2>
        <table>
          <thead>
            <tr>
              <td>序号</td>
              <td>名称</td>
              <td>手机号</td>
              <td>年龄</td>
              <td>身份</td>
              <td>操作</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(l,i) in list">
                <td>{{i+1}}</td>
                <td> {{l.username }}</td>
                <td> {{l.phone}}</td>
                <td> {{l.age}}</td>
                <td v-bind:class="'class'+l.role" >
                   {{roles[l.role-1] }}
                </td>
                <td>
                  <button v-on:click="list.splice(i,1)">删除</button>
                  <button v-on:click="updatedata(l,i)">修改</button>
                </td>
            </tr>
          </tbody>
        </table>
        <div>
          <h2>添加用户</h2>
          <div>
            <input type="text" placeholder="用户名" v-model="form.username">
          </div>
          <div>
            <input type="text" placeholder="年龄" v-model="form.age">
          </div>
          <div>
            <input type="text" placeholder="手机号" v-model="form.phone">
          </div>
          <div>
            <select v-model="form.role" >
              <option value="">请选择</option>
              <option v-bind:value="i+1"  v-for="(l,i) in roles" >
                {{l}}
              </option>
            </select>
          </div>
          <button v-on:click="addUser">添加用户</button>
          <button v-on:click="form={}">重置数据</button>
        </div>
        <div class="modal"  v-show="show">
            <p>修改数据  </p>
            <div>
              <input type="text" placeholder="用户名" v-model="uform.username">
            </div>
            <div>
              <input type="text" placeholder="年龄" v-model="uform.age">
            </div>
            <div>
              <input type="text" placeholder="手机号" v-model="uform.phone">
            </div>
            <div>
              <select v-model="uform.role">
                <option value="">请选择</option>
                <option v-for="(l,i) in roles" v-bind:value="i+1"> {{l}}</option>
              </select>
            </div>
            <p>
              <button @click="confirmset">确定修改</button>
              <button v-on:click="closeModal">取消</button>
            </p>
        </div>
    </div>

    <script>
      // v-on 缩写成 @ 
      const vm  = new Vue({
        el:"#app",
        data:{
          uform:{   // 修改数据   表单  

          },
          form:{     //  添加数据  表单 
            role:1
          },
          show:false,   // 控制弹框的显示隐藏 
          index:-1,    // 点击修改的数据的下标  
          roles:['学员','讲师','班主任','校长'],   // 身份列表 
          list:[
            // 1 学员  2 讲师  3 班主任  4. 校长 
            {
              username:"小红",
              age:28,
              phone:18012341234,
              role: 2      
            },
            {
              username:"王甜",
              age:18,
              phone:15012341234,
              role: 3      
            },
            {
              username:"大左",
              age:30,
              phone:1808641781,
              role: 2     
            },
            {
              username:"程乐",
              age:24,
              phone:13212341234,
              role: 1     
            },
            {
              username:"申校",
              age:48,
              phone:19012348888,
              role:4     
            },
          ]
        },
        methods:{
          updatedata(l,i){  // 点击修改 
              this.show = true;
              this.uform = {...l}   // 浅拷贝 变为 深拷贝   
              this.index = i;    // 点击这条数据的下标  
          },
          confirmset(){   // 确认修改
             this.list.splice(this.index,1,this.uform) // 修改数据  替换数据 
             this.show = false;   // 隐藏弹框  
          },
          addUser(){   // 添加用户
            // 判断各项数据是否为空 
            this.list.push(this.form)
            this.form = {}   
          },
          closeModal(){ // 取消修改 
            this.show = false;
            this.uform = {}  
          }
        }
      })
    </script>
</body>
</html>